<template>
    <el-card >
      <span>数据修改</span> 
           <el-form  
            style="text-align:center;font-size:20px;"
            size="medium"
            label-width="auto"
            :model="formData" 
            ref="formData">
            <div class="tabform">
            <span style="font-size: 24px;">流转信息登记表</span>
            <table style="border-collapse: collapse; margin: 0px auto; width:65%;" align="center" cellspacing="0" cellpadding="0" class="iptTable">
              <tr>
                  <td><span style="color: red">*</span>权利人姓名</td>
                  <td style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.obligee"></el-input>
                  </td>
                  <td><span style="color: red">*</span>权利人身份证号码</td>
                  <td style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.obligeeIdCard"></el-input>
                  </td>
                  <td><span style="color: red">*</span>联系电话</td>
                  <td style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.obligeePhone"></el-input>
                  </td>
                  <td><span style="color: red"></span>地址</td>
                  <td style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.obligeeAddress"></el-input>
                  </td>
              </tr>
              <tr><td colspan="8">承租人基本信息</td></tr>
              <tr>
                  <td><span style="color: red">*</span>承租人姓名</td>
                  <td style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.lessee"></el-input>
                  </td>
                  <td><span style="color: red">*</span>承租人身份证号码</td>
                  <td style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.lesseeIdCard"></el-input>
                  </td>
                  <td><span style="color: red">*</span>联系电话</td>
                  <td style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.lesseePhone"></el-input>
                  </td>
                  <td><span style="color: red"></span>地址</td>
                  <td style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.lesseeAddress"></el-input>
                  </td>
              </tr>
              <tr>
                  <td colspan="8" >土地流转信息</td>
              </tr>
              <tr>
                  <td><span style="color: red"></span>流转类型</td>
                  <td style="text-align: center">
                      <el-select v-model="formData.circulationType" placeholder="请选择流转类型" >
                          <el-option label="未知" :value="0"></el-option>
                          <el-option label="首次登记" :value="1"></el-option>
                          <el-option label="转移登记" :value="2"></el-option>
                          <el-option label="变更登记" :value="3"></el-option>
                          <el-option label="注销登记" :value="4"></el-option>
                          <el-option label="更正登记" :value="5"></el-option>
                          <el-option label="异议登记" :value="6"></el-option>
                          <el-option label="预告登记" :value="7"></el-option>
                          <el-option label="查封登记" :value="8"></el-option>
                          <el-option label="其他" :value="9"></el-option>
                    </el-select>
                  </td>
                  <td><span style="color: red"></span>流转面积(㎡)</td>
                  <td style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.circulationArea"></el-input>
                  </td>
                  <td><span style="color: red"></span>流转价格(元/亩·年)</td>
                  <td style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.circulationPrice"></el-input>
                  </td>
                  <td><span style="color: red"></span>房屋结构</td>
                  <td style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.housingStructure"></el-input>
                  </td>
              </tr>
              <tr>
                  <td><span style="color: red"></span>现状描述</td>
                  <td colspan="7" style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.currentSituationDescription"></el-input>
                  </td>
              </tr>
              <tr>
                  <td><span style="color: red"></span>流转方式</td>
                  <td style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.circulationMode"></el-input>
                  </td>
                  <td><span style="color: red"></span>流转期限</td>
                  <td style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.circulationPeriod"></el-input>
                  </td>
                  <td><span style="color: red"></span>组织名称</td>
                  <td style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.organizationName"></el-input>
                  </td>
                  <td><span style="color: red"></span>信用代码</td>
                  <td style="text-align: center" >
                    <el-input autocomplete="off" v-model="formData.creditCode"></el-input>
                  </td>
              </tr>
              <tr>
                  <td><span style="color: red"></span>备注</td>
                  <td colspan="7" style="text-align: center">
                    <el-input autocomplete="off" v-model="formData.common"></el-input>
                  </td>
              </tr>
              <tr>
                  <td >权利人照片</td>
                  <td colspan="7" style="height:500px;text-align: left;">

                       <!-- <div> -->
                         <!-- 正面 -->
                          <!-- <div  class="imgss" style="float:left;">
                            <el-upload
                            class="upload-demo"
                            drag
                            action="#"
                            multiple
                            ref="upload"
                            name="imgUrl"
                            :show-file-list="false"
                            :on-change="getObligeeFront"
                            :class="{hide:obligeeUploadFront}">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">请<em>点击上传</em>身份证正面</div>
                            </el-upload>
                            <img v-show="obligeeFrontVisible" class="imgss" id="p1"  :src="formData.obligeeImgFront">
                          </div> -->
                          <!-- 背面 -->
                          <!-- <div  class="imgss" style="float:left;">
                            <el-upload
                            class="upload-demo"
                            drag
                            action="#"
                            multiple
                            ref="upload"
                            name="imgUrl"
                            :show-file-list="false"
                            :on-change="getObligeeBack"
                            :class="{hide:obligeeUploadBack}">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">请<em>点击上传</em>身份证背面</div>
                            </el-upload>
                            <img  class="imgss" id="p2" v-show="obligeeBackVisible" :src="formData.obligeeImgBack">
                          </div>
                       </div> -->
                      <div>
                        <!-- 正面 -->
                          <div  class="imgss" style="float:left;"><img id="p1" class="imgss" src="~@/assets/img/login/front.png"></div>
                         <!-- 背面 -->
                          <div  class="imgss" style="float:left;"><img id="p2" class="imgss" src="~@/assets/img/login/back.png"></div>
                       </div> 
                  </td>
              </tr>
              <tr>
                  <td >承租人照片</td>
                  <td colspan="7" style="height:500px;text-align: left">
                      <div>
                        <!-- 正面 -->
                          <div  class="imgss" style="float:left;"><img class="imgss" src="~@/assets/img/login/front.png"></div>
                         <!-- 背面 -->
                          <div  class="imgss" style="float:left;"><img  class="imgss" src="~@/assets/img/login/back.png"></div>
                       </div> 
                       <!-- <div> -->
                         <!-- 正面 -->
                          <!-- <div  class="imgss" style="float:left;">
                            <el-upload
                            class="upload-demo"
                            drag
                            action="#"
                            multiple
                            ref="upload"
                            name="imgUrl"
                            :show-file-list="false"
                            :on-change="getObligeeFront"
                            :class="{hide:obligeeUploadFront}">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">请<em>点击上传</em>身份证正面</div>
                            </el-upload>
                            <img v-show="obligeeFrontVisible" class="imgss" id="p1"  :src="formData.obligeeImgFront">
                          </div> -->
                          <!-- 背面 -->
                          <!-- <div  class="imgss" style="float:left;">
                            <el-upload
                            class="upload-demo"
                            drag
                            action="#"
                            multiple
                            ref="upload"
                            name="imgUrl"
                            :show-file-list="false"
                            :on-change="getObligeeBack"
                            :class="{hide:obligeeUploadBack}">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">请<em>点击上传</em>身份证背面</div>
                            </el-upload>
                            <img  class="imgss" id="p2" v-show="obligeeBackVisible" :src="formData.obligeeImgBack">
                          </div>
                       </div> -->
                  </td>
              </tr>
              <tr>
                  <td >合同照片</td>
                  <td colspan="7" style="height:500px;text-align: left">
                      <div>
                          <!-- <div  class="imgss" style="float:left;"><img class="imgss" src="~@/assets/img/login/test.png"></div>
                          <div  class="imgss" style="float:left;"><img  class="imgss" src="~@/assets/img/login/test.png"></div> -->
                      </div>
                  </td>
              </tr>
            </table>
            </div>
            <el-form-item style="margin-top:50px;position: fixed; bottom: 5%; left: 1300px;">
              <el-button type="primary" icon="el-icon-edit-outline" @click="submitProDataEdit">确认修改</el-button>
            </el-form-item>
        </el-form>
      
    </el-card>
</template>
<script>
import {proDataEditApi} from "@/api/propertyreApi";
export default {
    data() {
            return{
                formData:{
                        id:"",
                        obligee:"",//权利人
                        ownership:"",//权属
                        createTime:"",//创建日期
                        updateTime:"",//修改日期
                        circulationType:"",//流转类型
                        state:"",//审核状态
                        circulationCode:"",//流转编号
                        organizationName:"",//组织名称
                        obligeeIdCard:"",//权利人身份证号码
                        obligeePhone:"",//权利人电话
                        obligeeAddress:"",//权利人地址
                        common:"",//备注
                        contractCode:"",//合同编号
                        lessee:"",//承租人
                        lesseeIdCard:"",//承租人身份证号码
                        lesseePhone:"",//承租人电话
                        lesseeAddress:"",//承租人地址
                        circulationArea:"",//流转面积
                        circulationPrice:"",//流转价格
                        housingStructure:"",//房屋结构
                        currentSituationDescription:"",//现状描述
                        circulationPeriod:"",//流转期限
                        creditCode:"",//信用代码
                        circulationMode:"",//流转方式
                        obligeeImgFront:"",//权利人证件正面
                        lesseeImgFront:"",//承租人证件正面
                        obligeeImgBack:"",//权利人证件背面
                        lesseeImgBack:""//承租人证件背面
                },
                obligeeUploadFront:false,//权利人证件正面组件
                obligeeUploadBack:false,//权利人证件正面组件
                obligeeFrontVisible:false,//权利人证件正面图片
                obligeeBackVisible:false,//权利人证件背面图片
                lesseeFrontVisible:false,//权利人证件正面图片
                lesseeBackVisible:false//权利人证件背面图片
            }
        },
        created:function(){

        },
        methods:{
            //确认修改
            submitProDataEdit(){
                proDataEditApi(this.formData).then(res=>{
                    this.$message.success(res.data.respondMessage);
                    this.$router.push({
                        path: "/propertyre"
                    });
                }).catch(res=>{
                    this.$message.error(res.data.respondMessage);
                })
            },
            // 回显权利人身份证正面
            getObligeeFront(file){
              this.obligeeUploadFront=true;
              let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
	            if (regex.test(file.name.toLowerCase())) {
                this.formData.obligeeImgFront= URL.createObjectURL(file.raw)  // 获取图片的URL
                document.getElementById("p1").src= URL.createObjectURL(file.raw)
			        } else {
			          this.$message.error('请选择图片文件');
			        }
              this.obligeeFrontVisible=true;
            },
            //上传权利人身份证背面
            getObligeeBack(file){
              this.obligeeUploadBack=true;
              let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
	            if (regex.test(file.name.toLowerCase())) {
                this.formData.obligeeImgBack= URL.createObjectURL(file.raw)  // 获取图片的URL
                document.getElementById("p2").src= URL.createObjectURL(file.raw)
			        } else {
			          this.$message.error('请选择图片文件');
			        }
              this.obligeeBackVisible=true;
            }
        },
        mounted(){
            this.formData=this.$route.query;
            if (this.formData.obligeeImgFront==null||this.formData.obligeeImgFront=="") {
                this.obligeeUploadFront=false;
                this.obligeeFrontVisible=false;
            } else {
                // document.getElementById("p1").src=this.formData.obligeeImgFront;
                this.obligeeUploadFront=true;
                this.obligeeFrontVisible=true;
            }
            if (this.formData.obligeeImgBack==null||this.formData.obligeeImgBack=="") {
                this.obligeeUploadBack=false;
                this.obligeeBackVisible=false;
            } else {
                // document.getElementById("p2").src=this.formData.obligeeImgBack;
                this.obligeeUploadBack=true;
                this.obligeeBackVisible=true;
            }
            
            
        }
}
</script>
<style >
.iptTable{
    border-right: 1pt solid gray;
    border-bottom: 1pt solid gray;
    font-size: 15px;
}
.iptTable td {
    border: 1pt solid gray;
    border-bottom: none;
    border-right: 1pt solid gray;
    height: 50px;
  }
  .tabform .el-input .el-input__inner {
  border: none;
  text-align: center
}
.imgss{
    width:350px;
    height:200px
}
.hide{
  display: none;
}
</style>